<template>
	<view style="background-color: #f3f3f3;	padding-bottom: 45rpx;">
		<!-- 头部导航 -->
		<cu-custom bgColor="#fff" :isBack="false" textColor="#000000" >
			<block slot="backText">返回</block>
			<block slot="content">找工作</block>
		</cu-custom>

		<view class="search-all-wrap" style="background: #FFFFFF; padding-top: 10rpx;padding-bottom: 10rpx;display:flex;justify-content: flex-start;margin:0">
			<view class="search-wrap" style="width: 80%;">
				<image class="search_home" src="../../static/search_home.png"></image>
				<input 
					v-model="sdata" 
					class="uni-input" 
					@input="onInput" 
					confirm-type="search" 
					placeholder=" 搜索岗位"
					placeholder-style="color:#adaeb2;" 
					style="width: 70%;"/>
			</view>
			<view class="search-wrap-right">搜索</view>
		</view>
			
		<view class="content">
			<ren-dropdown-filter 
				:filterData='filterData' 
				:defaultIndex='defaultIndex'
				@onSelected='onSelected' 
				border = 'true'>
			</ren-dropdown-filter>
		</view>
				
		<view class="all_jobs">
			<view class="jobs_item" v-for="(item, index) in jobs_list"  :key="index" @click="viewNewsInfo(item.zhaopindataId)">
				<view>
					<view class="item_name_line">
						<view class="item_name" style="color: #000000;font-weight: bold;font-size: 30rpx;">{{item.zhaopindataGangwei}}</view>
						<view class="clear"></view>
						<view class="item_wage">{{item.zhaopindataXinzi | filterXinzi }}</view>
					</view>
					<view class="item_some_line">
						<view class="item_some" style="font-size: 30rpx;">{{item.zhaopindataQiye}} </view>
					</view>
					<view class="item_some_line">
						<view class="item_some_line_xueli">
							<view class="item_some btn">{{item.zhaopindataJingyan | filterJingyan}}</view>
							<view class="item_some btn">{{item.zhaopindataXueli | filterXueli}}</view>
						</view>
					</view>
					<view class="item_some_line">
						<view class="item_some">{{item.zhaopindataDiqu.replace(/,/g, ' ')}}</view>
						<view class="item_date">
							<uni-dateformat :date="item.zhaopindataTime" format="yyyy-MM-dd"></uni-dateformat>
						</view>
					</view>
				</view>
				<!-- <view class="item_company_line">
					<view class="company_name">{{item.zhaopindataQiye}}</view>
					<view class="clear"></view>
				</view> -->
			</view>		
		</view>
		
	</view>
</template>

<script>
	import RenDropdownFilter from '@/components/ren-dropdown-filter/ren-dropdown-filter.vue'
	import uniDateformat from '@/components/uni-ui/uni-dateformat/uni-dateformat.vue';
	const app = getApp();
	export default {
		components: {
			RenDropdownFilter,
			uniDateformat
		},
		data() {
			return {
				
			   //设置默认的分享参数
				share:{
					title:'找工作，不用愁！',
					path:'/pages/news/news',
					imageUrl:'',
					desc:'',
					content:''
				},
				
				
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				theme: app.globalData.theme.backgroundColor, //全局颜色变量

				filterData:[
						[
							{ text: '区域', value: '-1' }, { text: '西宁', value: 0 }, { text: '海东', value: 1 }, { text: '海西', value: 2 },
							{ text: '海南', value: 3 }, { text: '海北', value: 4 }, { text: '黄南', value: 5 },{ text: '果洛', value: 6 },
							{ text: '玉树', value: 7 },
						],
						[
							{ text: '薪资', value: '' }, { text: '面议', value: 0 }, { text: '1000~1500/月', value: 1 }, 
							{ text: '1500~2000/月', value: 2 },
							{ text: '2000~3000/月', value: 3 }, { text: '3000~5000/月', value: 4 }, { text: '5000以上/月', value: 5 },
						],
						[
							{ text: '经验', value: '' }, { text: '无经验', value: 0 }, { text: '1年以下', value: 1 }, 
							{ text: '1~3年', value: 2 }, { text: '3~5年', value: 3 }, { text: '5年以上 ', value: 4 },
						],
						[
							{ text: '学历', value: '' }, { text: '初中', value: 0 }, { text: '高中', value: 1 },
							{ text: '中技/中专', value: 2 }, { text: '大专', value: 3 }, { text: '本科', value: 4 },
							{ text: '硕士', value: 5 },
						]
					],
				defaultIndex:[0,0,0,0], // 默认选中条件索引
				jobs_list:[],
				quyuSelect:"",
				xinziSelect:"",
				jingyanSelect:"",
				xueliSelect:"",
				gangweiSelect:"",
			}
		},
		onShow() {
			this.getData();
		},
		methods: {
			//获取数据
			getData() {
				uni.request({
					url: app.globalData.serve_job_url + 'zhaopinList',
					data: {
						"zhaopindataDiqu":this.quyuSelect,
						"zhaopindataXinzi":this.xinziSelect,
						"zhaopindataJingyan":this.jingyanSelect,
						"zhaopindataXueli":this.xueliSelect,
						"zhaopindataGangwei":this.gangweiSelect
					},
					success: res => {
						this.jobs_list = res.data.rows;
					}
				});
			},
			// 搜索框查询
			onInput(e) {		
				this.gangweiSelect = e.detail.value;
				this.getData();
			},
			quyuByIndex(index){
				let quyu = this.filterData[0];
				for(var i=0;i<quyu.length;i++){
					let item = quyu[i];
					if(item.value == index){
						return item.text;
					}
				}
			},
			// 筛选条件
			onSelected(res){
				if((res[0])[0].value == -1){
					this.quyuSelect = '';
				}else{
					this.quyuSelect = this.quyuByIndex((res[0])[0].value);
				}
				this.xinziSelect = (res[1])[0].value;
				this.jingyanSelect = (res[2])[0].value;
				this.xueliSelect = (res[3])[0].value;
				this.getData();
			},
			// 查看岗位详情
			viewNewsInfo(zhaopindataId) {
				uni.navigateTo({
					url: '../../packageC/pages/news_detail/news_detail?zhaopindata_id=' + zhaopindataId,
				});
			},
		},
		filters:{
			filterXinzi(type){
				switch(type){
					case '0':
						return '面议'
						break;
					case '1':
						return '1000~1500/月'
						break;
					case '2':
						return '1500~2000/月'
						break;
					case '3':
						return '2000~3000/月'
						break;
					case '4':
						return '3000~5000/月'
						break;
					case '5':
						return '5000以上/月'
						break;
				}
			},
			filterJingyan(type){
				switch(type){
					case '0':
						return '无经验'
						break;
					case '1':
						return '1年以下'
						break;
					case '2':
						return '1~3年'
						break;
					case '3':
						return '3~5年'
						break;
					case '4':
						return '5年以上'
						break;
				}
			},
			filterXueli(type){
				switch(type){
					case '0':
						return '初中'
						break;
					case '1':
						return '高中'
						break;
					case '2':
						return '中技/中专'
						break;
					case '3':
						return '大专'
						break;
					case '4':
						return '本科'
						break;
					case '5':
						return '硕士'
						break;
				}
			}
		}
	}
</script>

<style>
	/* 大班课/内容列表公共样式 */
	@import url("/static/css/search/search.css");
	.search-a11-wrap{
		display: flex;
		align-items: center;
	}
	.search-wrap {
		width: 73% !important;
		margin-left: 43rpx;
		border-radius: 15rpx;
	}
	
	
	.search-wrap-right{
		width: 60rpx;
		color: #3694EF;
		line-height: 70rpx;
		margin-left: -46rpx;
	}
	
	.content{
		height: 95rpx;
	}
	.all_jobs{
		width: 100%;
		padding: 20rpx;
	}
	.jobs_item{
		position: relative;
		width: 100%;
		background: #FFFFFF;
		margin-top: 12rpx;
		padding: 20rpx 35rpx 8rpx 35rpx;
		border-radius: 8rpx;
	}
	.all_jobs .jobs_item .item_name_line {
	    position: relative;
	    height: 55rpx;
	    line-height: 55rpx;
	}
	.all_jobs .jobs_item .item_name_line .item_name{
		display: block;
		float: left;
		height: 45rpx;
		line-height: 45rpx;
		text-decoration: none;
		color: #000000;
		font-size: 33rpx;
		width: 75%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.all_jobs .jobs_item .item_name_line .item_wage{
		    position: absolute;
		    right: 2rpx;
		    top: 50%;
		    -webkit-transform: translate(0, -50%);
		    transform: translate(0, -50%);
		    color: #3694EF;
		    line-height: normal;
			font-size: 25rpx;
	}
	.all_jobs .jobs_item .item_name_line .clear{
		clear: both;
		height: 0;
		font-size: 0;
		line-height: 0;
	}
	.all_jobs .jobs_item .item_some_line{
		position: relative;
	    height: 55rpx;
	    line-height: 55rpx;
		margin-bottom: 10rpx;
	}
	.all_jobs .jobs_item .item_some_line .item_some_line_xueli{
		display: flex;
		justify-content: flex-start;	
	}
	.all_jobs .jobs_item .item_some_line .item_some{
		height: 45rpx;
		line-height: 45rpx;
		color: #666666;
		font-size: 27rpx;
	}
	  .all_jobs .jobs_item .item_some_line .btn{
	  	padding: 14rpx;
		background-color: #f6f6f6;
		margin-right: 10rpx;
		border-radius: 6rpx;
		display: flex;
	   justify-content: center;
	   align-items: center;
	  }
	.all_jobs .jobs_item .item_some_line .item_date{
		    position: absolute;
		    right: 2rpx;
		    top: 0;
		    height: 45rpx;
		    line-height:45rpx;
		    color: #999999;
			font-size: 23rpx;
	}
	.all_jobs .jobs_item .split_line{
		width: 100%;
		border-bottom: 2rpx solid #e2e2e2;
	}
	.all_jobs .jobs_item .item_company_line{
		position: relative;
		height: 55rpx;
		line-height: 55rpx;
		margin-top: 15rpx;
	}
	.all_jobs .jobs_item .item_company_line .company_name{
		display: block;
		float: left;
		height: 45rpx;
		line-height: 45rpx;
		text-decoration: none;
		color: #666666;
		font-size: 27rpx;
	}
	.filter-wrapper {
		border: none !important;
	}
	.navs view {
		justify-content: center;
	}
</style>